<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 韩金龙
  Date: 2021/12/9
  Time: 10:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/fileupload.js"></script>
    <script src="bootstrap-4.6.0-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.min.css">
</head>
<body>
    <form action="list.do" method="post" id="mh">
        <input type="hidden" name="PageNum">
        商品名:<input type="text" name="pname" value="${map.pname}">
        <input type="submit" value="搜索">
    </form>
    <div class="row" style="text-align: center">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            添加
        </button>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">添加</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="add">
                            商品名称:<input type="text" name="pname"><br>
                            商品价格:<input type="text" name="price"><br>
                            商品图片:<div class="photoUpLoad" >
                            <input type="file"   class="photo" name="photo" accept="image/*"><span class="cross">+</span>
                            <img src="" alt="" class="photoEcho" width="150px">
                            </div><br>
                            商品仓库:<select name="bid">
                            <option>请选择</option>
                        </select><br>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="add()">添加</button>
                    </div>
                </div>
            </div>
        </div>
    <table class="table table-dark">
        <tr>
            <th>编号</th>
            <th>商品</th>
            <th>价格</th>
            <th>图片</th>
            <th>仓库</th>
        </tr>
        <c:forEach items="${pageInfo.list}" var="li">
            <tr>
                <td>${li.pid}</td>
                <td>${li.pname}</td>
                <td>${li.price}</td>
                <td>
                    <img src="${li.pic}" alt="无法显示" width="50px">
                </td>
                <td>${li.bname}</td>
            </tr>
        </c:forEach>
        <tr>
            <td colspan="20">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="#"onclick="fy(${pageInfo.isFirstPage?1:pageInfo.prePage})">上一页</a></li>
                        <li class="page-item"><a class="page-link" href="#"onclick="fy(1)">1</a></li>
                        <li class="page-item"><a class="page-link" href="#"onclick="fy(2)">2</a></li>
                        <li class="page-item"><a class="page-link" href="#"onclick="fy(3)">3</a></li>
                        <li class="page-item"><a class="page-link" href="#"onclick="fy(${pageInfo.isLastPage?pageInfo.pages:pageInfo.nextPage})">下一页</a></li>
                    </ul>
                </nav>
            </td>
        </tr>
    </table>
    </div>

</body>
<script>
    function fy(PageNum) {
        $("[name='PageNum']").val(PageNum)
        $("#mh").submit()
    }
    $(function () {
        $.ajax({
            url:"baseList.do",
            type:"post",
            dataType:"json",
            success:function(obj) {
                console.log(obj)
                for (let i in obj) {
                    $("[name='bid']").append('<option value='+obj[i].bid+'>'+obj[i].bname+'</option>')
                }
            }
        })
    })
    function add() {
        var formData = new FormData($("#add")[0]);
        $.ajax({
            url:"add.do",
            type:"post",
            data:formData,
            dataType:"json",
            success:function(obj) {
                console.log(obj)
                if (obj>0){
                    alert("添加成功!!")
                    location="list.do"
                }
            },
            processData:false,
            contentType:false,
        })
    }
</script>
</html>
